<!--
/**
* Author: tt
* Date: 2023年5月30日10:30:41
* Desc: 新人礼包
*/
-->
<template>
  <zm-popup
    class="newcomer"
    custom-class="newcomer"
    v-model="show"
    @close="close"
    mode="center"
    :closeable="false"
    :round="9"
    bg-color="transparent"
  >
    <view class="main">
      <view class="newcomer-top"></view>
      <view class="newcomer-middle">
        <view class="coupon-item" v-for="item in listData" :key="item.id">
          <view class="coupon-item-left">
            <view v-if="item.prizeType === '2'" class="mr10 w120">
              <view style="line-height: 1.5">
                <text class="text-orange fs30">￥</text>
                <text class="text-orange fs46 mr10">{{
                  item.reduceMoney
                }}</text>
              </view>
              <view class="tc fs18 text-orange">满{{ item.money }}元可用</view>
            </view>
            <view class="info">
              <view class="name one-show" v-if="item.prizeType === '1'">{{
                item.name || '--'
              }}</view>
              <view v-else class="name one-show">{{ item.name }}</view>
              <view class="time one-show">有效期:{{ item.expireTime }}</view>
            </view>
          </view>

          <view class="coupon-item-right">
            <view class="b">{{ item.number }}张</view>
            <view class="bt" @click="onUse(item)">去使用</view>
          </view>
        </view>
      </view>
      <view class="newcomer-bottom"></view>
      <view class="close" @click="close"></view>
    </view>
  </zm-popup>
</template>

<script>
  import ZmPopup from '@/commons/ZmPopup'
  export default {
    name: '',
    components: {
      ZmPopup
    },
    data() {
      console.log('this.listData', this.listData)
      return { couponType: '1' }
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },

      listData: {
        type: Array,
        default() {
          return []
        }
      }
    },
    computed: {
      show: {
        set(v) {
          this.$emit('input', v)
        },
        get() {
          return this.value
        }
      }
    },
    methods: {
      close() {
        this.$emit('input', false)
      },
      onUse(item) {
        if (item.prizeType === '1') {
          this.$tools.navigateTo('/pages/ticket/ticket', {}, 'switchTab')
        } else if (item.prizeType === '2') {
          this.$tools.navigateTo('/pages/mall/mall', {}, 'switchTab')
        } else if (item.prizeType === '3') {
          this.$tools.navigateTo('/pagesOrder/merchantsCoupon/index')
        }
        this.close()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .main {
    height: auto;
    width: 660rpx;
    padding: 25rpx;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    .newcomer-top {
      height: 288rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/newcomer-top.png)
        no-repeat;
      background-size: 100% 100%;
    }
    .newcomer-middle {
      margin: -2rpx 0;
      max-height: 600rpx;
      min-height: 391rpx;
      padding: 0 40rpx;
      overflow-y: auto;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/newcomer-middle.png)
        no-repeat;
      background-size: 100% 100%;
      .coupon-item {
        background-image: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/activity/coupon-item.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        .coupon-item-left {
          display: flex;
          padding: 20rpx;
          overflow-x: auto;
          flex: 1;
          .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow-x: auto;
            flex: 1;
            .name {
              font-weight: bold;
              margin: 10rpx 0;
              font-size: 26rpx;
              width: 100%;
            }
            .time {
              margin-bottom: 10rpx;
              font-size: 18rpx;
              width: 100%;
            }
          }
        }
        .coupon-item-right {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 15rpx;
          width: 120rpx;
          .bt {
            width: 89rpx;
            height: 38rpx;
            line-height: 38rpx;
            margin-top: 5rpx;
            background: linear-gradient(135deg, #fea631 0%, #f9a72e 100%);
            border-radius: 16rpx;
            font-size: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
          }
        }
      }
    }
    .newcomer-bottom {
      height: 113rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/newcomer-bottom.png)
        no-repeat;
      background-size: 100%;
    }
    .close {
      margin-top: 30px;
      margin-left: calc(50% - 25rpx);
      width: 50rpx;
      height: 50rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/close.png)
        no-repeat;
      background-size: 100%;
    }
  }
</style>
